<template>
    <div class="main-vue">
        <div class="main-xiao">
            <a-spin :spinning="loading" tip="正在努力加载中">
                <a-space style="padding: 10px;">
                    <a-button type="primary" @click="showSeting = true">设置</a-button>
                    <a-button type="primary" @click="onRefresh" danger>刷新数据</a-button>
                    <h3 v-if="resUid" style="margin: 0;margin-left: 10px;font-weight: bold;">uid: <span style="color: #2ecc71;">{{ resUid }}</span></h3>
                </a-space>
                <a-tabs class="main-aic">
                    <template v-for="(list, key, i) in resData">
                        <a-tab-pane :key="key" :tab="key" v-if="list.length > 0">
                            <div class="list">
                                <div class="item" v-for="item, i in list" :key="i">
                                    <div class="icon">
                                        <img :src="`./icon/${item.name}.png`" alt="">
                                    </div>
                                    <div class="progress-box">
                                        <ZProgress :progress="item.num / 90 * 100" :text="item.num + '抽' + (item.isNo ? '未出' : '')" />
                                    </div>
                                    <div class="wai" v-if="key == '活动祈愿' && item.isWai">
                                        <span v-if="item.isWai">歪</span>
                                    </div>
                                </div>
                            </div>
                        </a-tab-pane>
                    </template>
                </a-tabs>

                <a-result v-if="isNull" title="请设置Cookie并点击刷新数据按钮">
                    <template #extra>
                        <a-button type="primary" @click="showSeting = true">打开设置</a-button>
                        <a-button type="primary" @click="onRefresh">刷新数据</a-button>
                    </template>
                </a-result>
            </a-spin>

        </div>

        <a-drawer class="z-drawer" v-model:visible="showSeting" title="设置" placement="right">
            <a-space direction="vertical" style="width: 100%;">
                <a-textarea v-model:value="cookis" placeholder="输入Cookie" :auto-size="{ minRows: 4, maxRows: 10 }" />
                <a-input v-model:value="uid" placeholder="输入uid，如果您只有一个角色，将不会生效" />
                <a-space>
                    <a-button type="primary" @click="onSave">保存</a-button>
                    <a-button @click="showSeting = false">取消</a-button>
                    <a-button type="dashed" @click="showCokieTip = true">Cookie获取方式</a-button>
                </a-space>
            </a-space>
            <template #footer>
                <a-space direction="vertical">
                    <a-alert message="本站不会以任何形式在服务器保存你的数据，所有关于你的数据都只在本地缓存" type="warning" />
                    <a-alert type="success">
                        <template #message>
                            项目已在 <a href="https://gitee.com/yyznm/ys-tongji" target="_blank">https://gitee.com/yyznm/ys-tongji</a> 开源
                        </template>
                    </a-alert>
                </a-space>
            </template>
        </a-drawer>
        <Tutorial v-model="showCokieTip" />
    </div>
</template>

<script setup lang="ts">
import {
    Button as AButton,
    Drawer as ADrawer,
    Textarea as ATextarea,
    Input as AInput,
    Space as ASpace,
    Tabs as ATabs,
    TabPane as ATabPane,
    Result as AResult,
    Spin as ASpin,
    Alert as AAlert,
    Modal as AModal,
    message
} from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import 'ant-design-vue/es/alert/style/css'
import 'ant-design-vue/es/spin/style/css'
import 'ant-design-vue/es/result/style/css'
import 'ant-design-vue/es/tabs/style/css'
import 'ant-design-vue/es/space/style/css'
import 'ant-design-vue/es/input/style/css'
import 'ant-design-vue/es/drawer/style/css'
import 'ant-design-vue/es/button/style/css'
import 'ant-design-vue/es/modal/style/css'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { computed, createVNode, defineAsyncComponent, onMounted, ref } from 'vue';
import ZProgress from '../components/ZProgress.vue';
import { jsList } from '../utils/data';
import { getList } from '../utils/ys';
const Tutorial = defineAsyncComponent(() => import('../components/Tutorial.vue'))

const showCokieTip = ref(false)
const showSeting = ref(false)
const loading = ref(false)
const cookis = ref('')
const uid = ref('')
const resUid = ref('')
const type = ref('活动祈愿' as '新手祈愿' | '常驻祈愿' | '活动祈愿' | '武器祈愿')

const data = ref({
    活动祈愿: [] as any[],
    武器祈愿: [] as any[],
    常驻祈愿: [] as any[],
    新手祈愿: [] as any[],
})
function onSave() {
    if (!cookis.value) {
        message.info('请输入Cookis')
        return
    }
    localStorage.setItem('z-cookis', cookis.value.replaceAll("(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))", ""))
    localStorage.setItem('z-uid', uid.value)
    showSeting.value = false
    message.success('保存成功')
}
function onRefresh() {
    if (!localStorage.getItem('z-cookis')) {
        message.info('您需要先设置Cookis')
        showSeting.value = true
        return
    }
    AModal.confirm({
        title: '确定要刷新数据吗?',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div', { style: 'color:red;' }, '将要覆盖当前数据'),
        okText: '确定',
        cancelText: '取消',
        okType:'danger',
        okButtonProps:{
            type:'primary'
        },
        onOk() {
            loading.value = true
            getList().then((res: any) => {
                console.log(res);
                data.value = res
                localStorage.setItem('z-ys', JSON.stringify(res))
                init()
            }).finally(() => {
                loading.value = false
            })
        },
    });
}
onMounted(() => {
    cookis.value = localStorage.getItem('z-cookis') || ''
    uid.value = localStorage.getItem('z-uid') || ''
    data.value = JSON.parse(localStorage.getItem('z-ys') || "{}")
    init()
})

const isNull = computed<boolean>(() => {
    let types = ['新手祈愿', '常驻祈愿', '活动祈愿', '武器祈愿']
    for (let i = 0; i < types.length; i++) {
        // @ts-ignore
        if (data.value[types[i]] && data.value[types[i]].length > 0) {
            return false
        }
    }
    return true
})

const resData = ref({
    活动祈愿: [] as any[],
    武器祈愿: [] as any[],
    常驻祈愿: [] as any[],
    新手祈愿: [] as any[],
})
function init() {
    handleList('新手祈愿')
    handleList('常驻祈愿')
    handleList('活动祈愿')
    handleList('武器祈愿')
}

function handleList(type: '新手祈愿' | '常驻祈愿' | '活动祈愿' | '武器祈愿') {
    let list = data.value[type] || []
    let num = 0
    let sub = []
    if (list.length > 0) {
        resUid.value = list[0].uid
    }
    for (let i = list.length - 1; i >= 0; i--) {
        num++
        const obj = list[i];
        if (obj.rank_type == 5) {
            sub.push({
                num,
                isNo: false,
                isWai: isWai(obj.name),
                ...JSON.parse(JSON.stringify(obj))
            })
            num = 0
            continue
        }
        if (i == 0) {
            sub.push({
                num,
                isWai: false,
                isNo: true,
                name: '未出抽数'
            })
        }
    }

    resData.value[type] = sub.reverse()
}

function isWai(name: string) {
    for (let i = 0; i < jsList.length; i++) {
        const js = jsList[i];
        if (js.label == name) {
            return js.isWai
        }
    }
    return false
}
</script>

<style lang="scss">
.z-drawer {
    .ant-drawer-content-wrapper {
        width: 500px !important;
        max-width: 100%;
    }
}
</style>

<style scoped lang="scss">
.main-vue {
    // background-image: url('https://img.cdn.yyzhu.vip/2022/12/24/201323183.png');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding: 10px 0 20px;

    .main-xiao {
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px;
    }
    .main-aic{
        border-radius: 15px;
        background-color: rgba(139, 151, 166, 0.1);
        padding: 10px;
        padding-top: 0;
    }
}

.list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 5px;

    .item {
        display: flex;
        align-items: center;
        gap: 10px;

        .icon {
            height: 40px;
            width: 40px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }

        .progress-box {
            flex: 1;
            position: relative;
        }

        .wai {
            height: 37px;
            width: 37px;
            position: relative;

            span {
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 3.4px solid #e74c3c;
                border-radius: 50%;
                color: #e74c3c;
                font-size: 16px;
                font-weight: bold;
                transform: rotate(20deg);
            }
        }
    }
}
</style>